<template>
  <div class="input-editor__module">
    <template v-if="isEdit">
      <el-input :placeholder="placeHolder" style="margin-right:10px" v-model="selfValue" />
      <el-button @click="submit" icon="el-icon-edit-outline" plain type="primary">确认</el-button>
      <el-button @click="cancelHandelr" icon="el-icon-refresh-left" plain type="danger">取消</el-button>
    </template>
    <template v-else>
      <span>{{useValue}}</span>
      <span @click="editHandler" class="edit__btn">
        <i class="el-icon-edit" /> 编辑
      </span>
    </template>
  </div>
</template>

<script>
import { setOptionAPI } from '@/api/utils';

export default {
    name: 'InputEditorModule',
    props: {
        name: {
            type: [String, Number],
            required: true,
        },
        value: {
            type: [String, Number],
            required: true,
        },
        group: {
            type: String,
            required: true,
        },
    },
    data() {
        return {
            isEdit: false,
            selfValue: '',
        };
    },
    computed: {
        useValue() {
            return this.selfValue || this.value || '未设置';
        },
        placeHolder() {
            return this.selfValue || this.value || '请输入';
        },
    },
    methods: {
        async setOptions() {
            await setOptionAPI(this.name, this.selfValue, this.group);
        },
        async submit() {
            this.isEdit = false;
            this.setOptions();
        },
        editHandler() {
            this.isEdit = true;
        },
        cancelHandelr() {
            this.selfValue = '';
            this.isEdit = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.input-editor__module {
  display: flex;
  font-size: 12px;
  color: #666;
  .edit__btn {
    margin-left: 10px;
    color: $menuActiveText;
    cursor: pointer;
  }
}
</style>
